<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/banner1.css">
    <link rel="stylesheet" href="css/search.css">
    <link rel="stylesheet" href="css/banner2.css">
    <link rel="stylesheet" href="./css/info.css">
    <link rel="stylesheet" href="./css/modal.css">
    <script src="js/jquery-3.7.1.min.js"></script>
</head>
<body>
<header>
    <img src="./images/img.png" alt="">
    <div class="search-box">
        <label>
            <input type="text" class="search-txt" placeholder="想搜啥?" oninput="showSuggestions(this.value)" />
        </label>
        <a class="search-btn">
            <i class="fa fa-search" aria-hidden="true"></i>
        </a>
        <div class="suggestions" id="suggestions"></div>
    </div>
    <ul>
        <li><a href="index.html">秒杀首页</a></li>
        <li><a href="seckiling.html">秒杀专区</a></li>
        <li><a href="shop.html">全部商品</a></li>
        <li><a href="customer.html">联系客服</a></li>
        <li><a href="user.html">个人中心</a></li>
        <li><a href="login.html" id="user">登录|注册</a></li>
    </ul>
</header>
<div id="loading">
    <div class="spinner"></div>
</div>
<section class="banner1">
    <div class="container">
        <div class="big-box"></div>
        <div class="small-box">
        </div>
    </div>
    <div class="goods-info">
        <p id="goods-name"></p>
        <div id="timedown">
            <div id="text1">正在秒杀</div>
            <div id="text2">距结束还有</div>
            <div class="time">
                <span class="hour">1</span>
                <span class="colon">:</span>
                <span class="minute">2</span>
                <span class="colon">:</span>
                <span class="second">3</span>
            </div>
        </div>
        <div class="price">
            <div id="title"><img src="./images/jia.png" alt="秒杀价" style="width:150px; height:70px"></div>
            <span class="price3">￥</span><span class="price2" id="goods-price"></span>
        </div>
        <div class="goods-num">
            <span>数量</span>
            <span id="goods-residue-title">（剩余库存：
            <span id="goods-residue"></span>件）</span>
            <div class="num-box">
                <button class="minus">-</button>
                <label for="goods-num"></label><input type="text" value="1" id="goods-num">
                <button class="add">+</button>
            </div>
        </div>
        <div class="goods-btn">
            <button id="toBuy" onclick="goToBuy()">立即购买</button>
            <button id="add-cart">加入购物车</button>
        </div>
        <div class="info">
            <span id="buy-info">购买须知</span>
            <marquee id="myMarquee" behavior="scroll" direction="left" scrollamount="5" width="300px">
                本次秒杀活动的所有商品，一经售出，概不支持退换货，所有销售均为最终销售，请您在购买时慎重考虑。请注意，所有商品均限购一件，而且商品数量有限，先到先得。请在秒杀活动时间段内下单，非当前时间段不可购买。下单即表示您同意我们的秒杀活动用户协议，本平台对该活动拥有最终解释权。
            </marquee>
        </div>
    </div>
</section>
<section class="banner2">
    <div class="comment-section">
        <h1 style="text-align: center; margin-bottom: 20px;" >评论区</h1>
        <div class="comment-form">
            <label for="CommentNickname"></label><input type="text" placeholder="昵称" id="CommentNickname">
            <label for="CommentContent"></label><textarea placeholder="写下你的评论..." id="CommentContent"></textarea>
            <button type="button" id="comment" onclick="addComment()">提交评论</button>
        </div>
        <div id = "commentList">
            <div class="comment">
                <div class="comment-header">
                    <img src="./images/avatar/780.jpg" alt="头像" class="comment-avatar">
                    <div class="comment-info">
                        <span class="comment-name">昵称</span>
                        <span class="comment-time">2024-08-11 10:00</span>
                    </div>
                </div>
                <div class="comment-content">
                    这是一个示例评论内容。
                </div>
            </div>
            <!-- 更多评论 -->
        </div>
    </div>
    <div class="infoModal" id="infoModal">
        <div class="infoModalContent">
            <p id="infoTitle"></p>
            <button id="confirmBtn">确定</button>
        </div>
    </div>
</section>
<script src="./js/info.js"></script>
<script src="./js/search.js"></script>
<script src="./js/modal.js"></script>
<script>
    // 鼠标滚轮滚动事件
    window.addEventListener("scroll",()=>{
        let header=document.querySelector("header");
        header.classList.toggle("sticky",window.scrollY>0);
    })
</script>
</body>
</html>